<template>
  <div class="order-list-neck">
    <input type="text"
           v-model="la"
           class="less-amount mount">
    <span class="amount"><= 交易金额 >=</span>
    <input type="text"
           v-model="ma"
           class="more-amount mount">

    <span>交易人:</span>
    <input type="text"
           placeholder="可输入交易人的用户名"
           v-model="un"
           class="username">

    <span>编号:</span>
    <input type="text"
           placeholder="可输入订单编号"
           v-model="co"
           class="code">

    <Calendar title="起始:"
              :p-date="ld"
              @changeDate="date => this.ld = date"
              class="less-date"
    ></Calendar>
    <Calendar title="截至:"
              :p-date="md"
              @changeDate="date => this.md = date"
              class="more-date"
    ></Calendar>

    <button class="search-btn" @click="searchClick">搜 索</button>

  </div>
</template>

<script>
  import Calendar from "components/common/calendar/Calendar";

  export default {
    name: "Neck",
    props: {
      username: {
        type: String,
        default: '',
      },
      code: {
        type: String,
        default: '',
      },
      lessAmount: {
        type: Number,
        default: 0
      },
      moreAmount: {
        type: Number,
        default: 0
      },
      lessDate: {
        type: Date,
        default() {
          return new Date('2020-11-04 18:41:42')
        }
      },
      moreDate: {
        type: Date,
        default() {
          return new Date()
        }
      },
    },
    components: {
      Calendar,
    },
    data() {
      return {
        un: this.username,
        co: this.code,
        la: this.lessAmount,
        ma: this.moreAmount,
        ld: this.lessDate,
        md: this.moreDate
      }
    },
    methods: {
      searchClick() {
        this.$emit('search', {
          un: this.un,
          co: this.co,
          la: this.la,
          ma: this.ma,
          ld: this.ld,
          md: this.md,
        })
      }
    }
  }
</script>

<style scoped>
  .order-list-neck {
    position: relative;

    /*background-color: red;*/
  }
  .order-list-neck .mount {
    height: 28px;
    width: 80px;

    text-align: center;
  }
  .order-list-neck .more-amount {
    margin-right: 30px;
  }
  .order-list-neck .username {
    height: 28px;
    width: 140px;
    margin-right: 30px;
  }
  .order-list-neck .code {
    height: 28px;
    width: 200px;

  }
  .order-list-neck .less-date {
    position: absolute;
    right: 280px;
    top: 0;
  }
  .order-list-neck .more-date {
    position: absolute;
    right: 120px;
    top: 0;
  }
  .order-list-neck .search-btn {
    position: absolute;
    top: 14px;
    right: 0;

    height: 34px;
    width: 100px;

    color: white;
    font-size: 16px;

    background-color: #28a745;
    border-radius: 6px;
    outline: none;
    border: none;
  }
  .order-list-neck .search-btn:hover {
    opacity: 0.75;
    cursor: pointer;
  }
</style>